<template>
    <div class="createScene">
        <el-form :rules="rules" ref="form" :model="sceneInfo">
            <el-form-item prop="name">
                <div class="item">
                    <div class="label">场景名称：</div>
                    <div class="name">
                        <el-input maxlength="24" type="text" placeholder="场景名称" v-model.trim="sceneInfo.name"
                                  show-word-limit></el-input>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="area">
                <div class="item">
                    <div class="label">活动区域：</div>
                    <div class="name">
                        <city v-model="sceneInfo.area" :level="2"></city>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="industry">
                <div class="item">
                    <div class="label">行业：</div>
                    <div class="name">
                        <el-select v-model="sceneInfo.industry">
                            <el-option v-for="indus in industryList" :key="indus.key" :label="indus.value"
                                       :value="indus.key">
                                {{indus.value}}
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="selectedFunc">
                <div class="item">
                    <div class="label">
                        功能选择：
                    </div>
                    <div class="funcList">
                        <div>
                            <el-checkbox-group class="check-group"
                                               v-model="sceneInfo.selectedFunc">
                                <el-checkbox class="check-box" v-for="func in funcList" :label="func.type"
                                             :value="func.type"
                                             :key="func.type">
                                    <div class="info">
                                        <div class="func-icon">
                                            <div class="func" :class="func.icon"></div>
                                        </div>
                                        <div class="text">{{func.name}}</div>
                                        <!--<div class="nig">-->
                                        <!--<span @click.stop.prevent="">demo</span>-->
                                        <!--<div>|</div>-->
                                        <!--<span @click.stop.prevent="">介绍</span>-->
                                        <!--</div>-->
                                    </div>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>

            </el-form-item>
            <el-form-item prop="defaultSpecial">
                <!-- <div class="item"> -->
                    <!-- <div class="label">默认背景：</div> -->
                    <!-- <div class="name bgImg"> -->
                       <bgComponent @change="bgChange" :isSmall="true" :bgdata="sceneInfo.defaultSpecial"></bgComponent>
                    <!-- </div> -->
                <!-- </div> -->
            </el-form-item>

            <el-form-item prop="">
                <div class="item">
                    <div class="label">屏幕比例：</div>
                    <div class="name">
                        <el-radio-group v-model="sceneInfo.aspectRatio">
                            <el-radio label="16:9">16:9</el-radio>
                            <el-radio label="4:3">4:3</el-radio>
                            <el-radio label="3">
                                <div class="userDefined">
                                    <div>自定义</div>
                                    <div>
                                        宽：
                                        <el-input :disabled="sceneInfo.aspectRatio!=='3'" style="width: 80px"
                                                  v-model="sceneInfo.userDefined.screenWidth"></el-input>
                                        高：
                                        <el-input :disabled="sceneInfo.aspectRatio!=='3'" style="width: 80px"
                                                  v-model="sceneInfo.userDefined.screenHeight"></el-input>
                                    </div>
                                </div>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </el-form-item>
            <!--<el-form-item prop="">-->
                <!--<div class="item">-->
                    <!--<div class="label">背景特效：</div>-->
                    <!--<div class="name">-->
                        <!--<el-radio-group v-model="sceneInfo.defaultSpecial">-->
                            <!--<el-radio label="1">无特效（默认）</el-radio>-->
                            <!--<el-radio label="2">离子</el-radio>-->
                            <!--<el-radio label="3">舞动</el-radio>-->
                            <!--<el-radio label="4">荧光</el-radio>-->
                        <!--</el-radio-group>-->
                        <!--<el-button style="margin:0 10px" type="text" @click="sfxLibraryVisibly = true">特效库</el-button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</el-form-item>-->
            <el-form-item prop="">
                <div class="item">
                    <div class="label">活动logo：</div>
                    <div class="name" style="display: flex">
                        <div style="width:50%;display: flex;align-items: flex-start">
                            <el-image :src="sceneInfo.logo">
                                <div slot="error" class="image-slot">
                                    请选择图片
                                    <span class="dot">...</span>
                                </div>
                            </el-image>
                            <el-button type="text" @click="picLibraryVisibly='logoImg'" style="margin-left: 10px">选择</el-button>
                            <el-button type="text" @click="sceneInfo.logo=''" style="margin-left: 10px">清除</el-button>
                        </div>
                        <div style="display:inline-block;float:right;width: 50%;padding-left: 20px">
                            <el-tooltip effect="dark" content="左上" placement="top-end">
                                <el-button type="primary" icon="el-icon-top-left" circle></el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="中上" placement="top">
                                <el-button type="primary" icon="el-icon-top" circle></el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="右上" placement="top-start">
                                <el-button type="primary" icon="el-icon-top-right" circle></el-button>
                            </el-tooltip>

                            <br/>
                            <br/>
                            <el-tooltip effect="dark" content="左" placement="left-start">
                                <el-button type="primary" icon="el-icon-back" circle></el-button>
                            </el-tooltip>

                            <el-button type="primary" icon="el-icon-edit" circle></el-button>

                            <el-tooltip effect="dark" content="右" placement="right">
                                <el-button type="primary" icon="el-icon-right" circle></el-button>
                            </el-tooltip>
                            <br/>
                            <br/>
                            <el-tooltip effect="dark" content="左下" placement="bottom-end">
                                <el-button type="primary" icon="el-icon-bottom-left" circle></el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="中下" placement="bottom">
                                <el-button type="primary" icon="el-icon-bottom" circle></el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="右下" placement="bottom-start">
                                <el-button type="primary" icon="el-icon-bottom-right" circle></el-button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <div class="buttons">
                <el-button type="info" @click="closeModal">取消</el-button>
                <el-button type="primary" @click="saveSceneInfo">创建</el-button>
            </div>
        </el-form>
        <el-dialog :visible="!!picLibraryVisibly" top="40px" width="800px" custom-class="library_dialog definedModal"
                   title="图片库" append-to-body
                   @close="picLibraryVisibly = false">
            <imagesLibrary @selected="selectCurrent" @close="picLibraryVisibly = false"></imagesLibrary>
        </el-dialog>
    </div>
</template>

<script>
    import city from '../../../common/city';
    import bgComponent from '../../../common/bgComponent';
    import imagesLibrary from '../baseSetting/library/imagesLibrary';
    import { industryList } from '@/assets/data/data';

    export default {
        name: 'createScene',
        components: {
            city, imagesLibrary,bgComponent
        },
        props: {
            closeModal: {
                required: true,
                type: Function,
            },
            getSceneList: {},
        },
        data() {
            return {
                funcList: [],
                timeList: [],
                industryList: industryList,
                sceneInfo: {
                    name: '',
                    area: '',
                    industry: '',
                    selectedFunc: [],
                    defaultBg: '',
                    defaultSpecial: '',
                    logo: '',
                    aspectRatio: '16:9',
                    userDefined: {
                        screenHeight: '',
                        screenWidth: '',
                    },
                },
                rules: {
                    name: [
                        { required: true, message: '请输入场景名称', trigger: 'blur' },
                    ],
                    area: [
                        { required: true, message: '请选择活动区域', trigger: 'click' },
                    ],
                    industry: [
                        { required: true, message: '请选择行业', trigger: 'change' },
                    ],
                    selectedFunc: [
                        { required: true, message: '请至少选择一个功能', trigger: 'change' },
                    ],
                    defaultBg: [
                        { required: true, message: '请选择默认背景图片', trigger: 'change' },
                    ],
                    logo: [
                        { required: true, message: '请选择logo图片', trigger: 'change' },
                    ],
                    number: [],

                },
                picLibraryVisibly: false,
                sfxLibraryVisibly: false,
            };
        },
        mounted() {
            let list = sessionStorage.getItem('tc');
            if (list) {
                let { funcList, timeList } = JSON.parse(list);
                this.funcList = funcList;
                this.timeList = timeList;
            } else {
                this.$api.get('/data/module_time', null, success => {
                    // console.log(success);
                    sessionStorage.setItem('tc', JSON.stringify(success));
                    this.funcList = success.funcList;
                    this.timeList = success.timeList;
                }, fal => {
                    this.$message.error(fal);
                });
            }
        },
        methods: {
            saveSceneInfo() {
                if (this.sceneInfo.aspectRatio === '3') {
                    if (!this.sceneInfo.userDefined.screenWidth || !this.sceneInfo.userDefined.screenHeight) {
                        this.$message.info('请输入自定义屏幕尺寸');
                        return false;
                    }
                }
                this.$refs.form.validate(res => {
                    if (res) {
                        let info = this.sceneInfo;
                        let moduleJson = [];
                        this.sceneInfo.selectedFunc.forEach(item => {
                            moduleJson.push(this.getSelectedInfo('func', item));
                        });
                        // console.log(info.endTime,Date.parse(info.endTime))
                        let param = {
                            name: info.name,
                            area: info.area.join(','),
                            industry: info.industry,
                            moduleJson,
                            defaultBg: info.defaultBg,
                            defaultSpecial: info.defaultSpecial,
                            screenScale: info.aspectRatio,
                            screenHeight: info.userDefined.screenHeight,
                            screenWidth: info.userDefined.screenWidth,
                            logo: info.logo,
                        };
                        this.$api.post('/st_scene/create', param, success => {
                            this.$message.success('创建成功');
                            this.closeModal();
                            this.getSceneList();
                        }, fal => {
                            this.$message.error(fal);
                        });
                    }
                    else {
                        this.$message.info('请完善场景信息');
                        return false;
                    }
                });

            },
            getSelectedInfo(type, id) {
                let info = '';
                if (type === 'func') {
                    this.funcList.forEach(item => {
                        item.type === id ? info = item : 0;
                    });
                } else {
                    this.timeList.forEach(item => {
                        item.type === id ? info = item : 0;
                    });

                }
                return info;
            },
            selectCurrent(data) {
                if (this.picLibraryVisibly === 'bgImg') {
                    this.sceneInfo.defaultBg = data.url;
                } else {
                    this.sceneInfo.logo = data.url;
                }
                this.picLibraryVisibly = false;
            },
            bgChange(data,url){
              this.sceneInfo.defaultSpecial = data;
              this.sceneInfo.defaultBg = url;
            }
        },
    };
</script>

<style lang="scss">
    .createScene {
        /deep/ .el-form-item__error {
            padding-left: 115px;
        }
        .item {
            margin: 10px 0;
            display: flex;
            .label {
                margin-right: 10px;
                width: 100px;
                text-align: right;
            }
            .name {
                width: calc(100% - 110px);
            }
            .bgImg.name {
                display: flex;
                /deep/ div.el-image {
                    text-align: center;
                }
                /deep/ img {
                    width: auto;
                }
            }
        }

        .funcList {
            width: calc(100% - 110px);
            p {
                color: #999999;
            }
            & > div {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
            }
        }

        .info {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            div {
                text-align: center;
                margin: 10px auto;
                font-size: 16px;
            }
            .text, .price {
                height: 20px;
            }
            .func-icon {
                text-align: center;
            }
            .nig {
                margin: 0;
                position: absolute;
                left: 0;
                bottom: -130px;
                width: 100%;
                background: #555;
                color: #FFFFFF;
                padding: 10px;
                transition: all .3s;
                @include flex;
                span {
                    width: 50%;
                    font-size: 12px;
                    text-align: left;
                }
                span:hover {
                    color: #1989FA;
                }
                span:first-of-type {
                    text-align: right;
                }
                div {
                    margin: 0 5px;
                }
            }
            &:hover {
                .nig {
                    bottom: 0;
                }
            }
        }

        .buttons {
            text-align: center;
            padding: 20px;
            button {
                width: 100px;
            }
        }

        .image-slot {
            color: #999;
            text-align: left;
        }
    }

    .userDefined {
        @include flex;
        div {
            margin-right: 10px;
            @include flex;
        }
    }

    .func {
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .func-scroll {
        background-image: url('../../../../assets/imgs/vipImg/scrollScreen.png');
    }

    .func-signIn {
        background-image: url('../../../../assets/imgs/vipImg/signIn.png');

    }

    .func-prize {
        background-image: url('../../../../assets/imgs/vipImg/prizeDraw.png');
    }

    .func-loop {
        background-image: url('../../../../assets/imgs/vipImg/loopPlay.png');
    }

    .func-barrage {
        background-image: url('../../../../assets/imgs/vipImg/barrage.png');
    }

    .func-userDefined {
        background-image: url('../../../../assets/imgs/vipImg/userDefined.png');
    }
</style>